<template>
  <div class="caidan">
    <div class="caidan_content">
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column type="index" label="ID" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="title"
          label="菜单名称"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="icon"
          label="ICON"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="url"
          label="URI"
          width="280"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="bangding"
          label="权限绑定"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="menu_status"
          label="状态"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
             <!-- v-if="scope.row.role_status !== 3" -->
            <el-button
              size="mini"
              type="danger"
              @click="bianji(scope.$index, scope.row), (Bianji = true)"
              class="xiugai"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="paging">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 8, 10]"
          :page-size="currentSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!--  每个页面的弹框都在最底部   -->
    <!-- 编辑弹框 -->
    <el-dialog title="基本信息" :visible.sync="Bianji">
      <el-form
        :model="ruleEditForm"
        ref="ruleEditForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="ID" prop="role">
          <el-input v-model="ruleEditForm.id" placeholder="输入id"></el-input>
        </el-form-item>

        <el-form-item label="菜单名称" prop="rolename">
          <el-input
            v-model="ruleEditForm.title"
            placeholder="请输入菜单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="rolename">
          <el-input
            v-model="ruleEditForm.url"
            placeholder="请输入菜单名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="rolename">
          <el-input
            v-model="ruleEditForm.menu_status"
            placeholder="请输入状态"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitEditForm('ruleEditForm')"
            >提交</el-button
          >
          <el-button @click="Bianji = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 主体表格，数据
      tableData: [],
      currentPage: 1,
      currentSize: 10,
      Bianji: false,
      cai_bj: false,
      cai_sc: false,
      ruleEditForm: {
        id: "",
        title: "",
        url: "",
        menu_status: "",
        permission_status: "", //权限状态
        type: "",
        create_date: "",
      },
      currentPage4: 4,
      tableTotal: 50,
    };
  },
  methods: {
     // 操作
     //  编辑
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            role: this.ruleEditForm.role,
            create_date: this.ruleEditForm.create_date,
            id: this.ruleEditForm.id,
            rolename: this.ruleEditForm.rolename,
            //  password:this.ruleEditForm.password ,
            // sysUser:{}
          };
          console.log(this.ruleAddForm);
          this.$axios({
            url: "/system/admin/sys/menumanagement/modMenuPerssionById",
            method: "post",
            data: data,
          })
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.Bianji = false;
                this.ruleEditForm = {
                  id: "",
                  create_date: "",
                  role: "",
                  //  sysUser: {},
                  rolename: "",
                };
              } else {
                this.$message.error("修改失败");
                this.dialogAddFormVisible = false;
              }
            })
            .catch((err) => {
              this.$message.error("修改失败");
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    bianji(index, row) {
      this.ruleEditForm = row;
      console.log(this.ruleEditForm);
    },
    // 删除
handleDelete(index, row) {
  //要改
  this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      console.log(index, row.id);
      this.$axios({
        url: "/system/admin/sys/menumanagement/delMenuPerssionById",
        method: "post",
        data: {
          id: row.id,
          online_status: 2,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            this.$message.error("删除失败！");
          }
          console.log(res);
          //  row.splice(index, 1);
        })
        .catch((err) => {
          this.$message.error("删除失败！");
          console.log(err);
        });
    })
    .catch(() => {
      this.$message({
        type: "info",
        message: "已取消删除",
      });
    });
},
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getTableData();
    },

    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    getTimeFormat(date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + "-" + this.add0(m) + "-" + this.add0(d);
    },
    // 分页--用户查询---接口
    getTableData(time = "") {
      this.$axios({
        url: "/system/admin/sys/menumanagement/findMenuPerssion",
        method: "post",
        data: {
          menu_status: "", //状态
          title: "", //菜单名称
          create_date: time, //时间
          url: "", //URL 地址
          currentPage: this.currentPage, //页数
          map: {},
          icon: "",
          // 每页多少条
          pageSize: this.currentSize, //每页多少条
        },
      })
        .then((res) => {
          console.log(res.data.data);
          res.data.data.forEach((v) => {
            v.account_status = v.menu_status == 1 ? true : false;
            v.create_date = this.getTimeFormat(v.create_date);
          });
          this.tableData = res.data.data;
          this.tableTotal = res.data.count;
          console.log(this.tableTotal);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getTableData();
  },
};
</script>

<style scoped>
.caidan {
  padding: 15px;
  background: #fff;
}
.caozuo_box {
  display: flex;
}
.xiugai {
  background-color: #009688;
  border-color: #409eff;
  color: #fff;
}

.shanchu {
  background-color: #ff5722;
  border-color: #409eff;
  color: #fff;
}
/* 分页 */
.paging {
  margin-top: 30px;
  margin-bottom: 15px;
}
</style>
